import { useSelector, useDispatch } from 'react-redux'
import { clearAll } from '../store/actions/todos'
import { filterTodo } from '../store/actions/filter'
const TodoFooter = () => {
  const list = useSelector((state) => state.todos)
  const type = useSelector((state) => state.filter)
  const dispatch = useDispatch()
  const total = list.filter((item) => item.done).length
  const types = ['all', 'active', 'completed']
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{total}</strong> item left
      </span>
      <ul className="filters">
        {types.map((item) => (
          <li key={item} onClick={() => dispatch(filterTodo(item))}>
            <a className={item === type ? 'selected' : ''} href="#/">
              {item}
            </a>
          </li>
        ))}
      </ul>
      <button
        className="clear-completed"
        onClick={() => dispatch(clearAll(list))}
      >
        清除已完成
      </button>
    </footer>
  )
}

export default TodoFooter
